<template>
    <div class="list-group">
        <div class="list-group-item" v-for="user in model" transition="item">
            <h4 class="list-group-item-heading"><editable :value.sync="user.name" ></editable></h4>
            <p class="list-group-item-text">年龄：<editable :value.sync="user.age" ></editable></p>
            <p class="list-group-item-text">地址：<editable :value.sync="user.address" ></editable></p>
            <div class="btn btn-danger btn-xs u-delete" v-on:click="_removeItem(user)">删除</div>
        </div>
        <div class="list-group-item" transition="item">
            <div class="btn btn-primary btn-lg" v-on:click="_addItem">新增</div>
            <!-- 测试数组翻转之后监听是否正常 -->
            <div class="btn btn-primary btn-lg" v-on:click="_reverse">反转</div>
        </div>

    </div>
    <p>
        {{model | json}}
    </p>
</template>
<style scoped>
    .u-delete{
        position: relative;
        top: -30px;
        right: -200px;
    }
</style>
<script>
import Vue from 'vue';
import co from 'co';
import util from 'util';
export default {
    props: {
        // 数据源
        dataSource:{
            type: String,
            required: true
        }
    },
    data:function(){
        return {
            model: [],
            modelOld:[],
            xjc:'1111'
        }
    },
    created: function(){
        console.log(this.dataSource);
        co(this._get);
        this._initWatch();
    },
    watch: {
        'model':{
            handler:function(newVal, oldVal){
                this._sync();
                // console.log(JSON.stringify(newVal), JSON.stringify(oldVal));
            }
        }
    },
    methods: {

        _initWatch (){
            // 在 dataSource 变化的时候更新模型
            this.$watch('dataSource', function(value){
                co(this._get);
            });
        },
        _removeItem (item){
            var index = this.model.indexOf(item);
            this.model.splice(index, 1);
        },
        _addItem (){
            var newUser = {
                "name":"点击编辑姓名",
                "age":"点击编辑年龄",
                "address":"点击编辑地址"
            }
            this.model.push(newUser);
        },
        _get: function* (){
            // 没有定义 dataSource 的时候返回 []
            if(!this.dataSource){
                this.model = [];
            }

            // 当 dataSource 为string的时候，它作为一个数据接口的url,并且获取 url 中的数据
            if(util.isString(this.dataSource)){

                var response = yield this.$http.get(this.dataSource, this.params);
                if(response.data.status === 0){
                    this.model = response.data.data;
                }else{
                    this.model = [];
                }
            }

            // 当 dataSource 为 Array 类型的时候，它作为数据本身直接返回
            if(util.isArray(this.dataSource)){
                this.model = this.dataSource;
            }

            this._initSync();
        },
        _add: function* (item){
            console.log('添加元素')
        },
        _update: function* (item){
            console.log('更新', item);
        },
        _remove: function* (item){
            console.log('删除', item);
        },
        _sync () {
            if(util.isArray(this.model)){
                // 判断数组是否又增加或者减少

                // 新增了哪几个
                var addedItems = this.model.filter((item, index)=>{
                    return (this.modelOld.indexOf(item) < 0);
                })



                // 移除了哪几个
                var removedItems = this.modelOld.filter((item, index)=>{
                    return (this.model.indexOf(item) < 0);
                })

                console.log('addedItems', addedItems);

                console.log('removedItems', removedItems);

                // 删除已经移除元素的监视器
                this._unwatchItems(this.modelOld);

                // 记录目前有哪几个元素
                this.modelOld = this.model.concat([]);


                // 为新增的元素增加监视器
                this._watchItems(this.model, 0);
            }
        },
        _initSync(){
            this.modelOld = this.model.concat([]);
            // 给每一个项绑定修改监视器
            this._watchItems(this.model, 0);
        },
        _watchItems(items, indexStart){
            items.forEach((item, index)=>{
                var unwatch = this.$watch('model['+(indexStart+index)+']', (value)=>{
                    console.log('modified', JSON.stringify(value))
                },{
                    deep: true
                })
                // 将监视器关闭函数绑定到每个元素上面
                item.unwatch = unwatch
            });
        },
        _unwatchItems (items) {
            items.forEach((item, index)=>{
                if(item.unwatch){
                    item.unwatch();
                }
            })
        },
        _reverse () {
            this.model.reverse();
        }
    }
}
</script>
